<template>
	<view class="pagecon">
		<head-box></head-box>
		<view class="bodycon">
			<view class="quntuanlist">
				<view class="item" v-for="(item, index) in list" :key="index" @tap="gpAlliAnceSel" :data-id="item.id">
					<view class="weixuan" v-if="isAlliAnceSel(item.id)==1" style="background-color:#007aff"><image class="duih" src="../../static/img/gou.png" mode="widthFix"></image></view>
					<view class="weixuan" v-if="isAlliAnceSel(item.id)==2" style="background-color:#e2e2e2"><image class="duih" src="../../static/img/gou.png" mode="widthFix"></image></view>
					<!--<view class="weixuan" v-if="isSel(item.id)==3" style="background-color:#dd524d"><text>待审</text></view>
					<view class="weixuan" v-if="isSel(item.id)==4" style="background-color:#4cd964"><text>已入</text></view>-->
					<view class="msg">
						<view><image  :src="item.gpinfoLogo" mode="heightFix"></image></view>
						<view><text>{{item.gpinfoShortname}}</text></view>
					</view>

				</view>
			</view>

		</view>
		<view class="personalInfor-page-main">
			<view class="personalInfor-page-main-box">
				<view class="_main-item">
					<view class="_main-item-chunk _main-item-label"><text>区县街道</text><text class="xing">*</text></view>
					<view class="_main-item-chunk _main-item-val">
						<picker class="_main-item-chunk" @change="districtchange" :value="Districtindex" :range="District">
							<view class="_main-item-chunk _main-item_select">
								{{District[Districtindex]}}
								<image class="_main-item_select_img" src="/static/img/drop-down.png" mode="aspectFill"></image>
							</view>
						</picker>
						<picker  class="_main-item-chunk" @change="streetchange" :value="streetindex" :range="street">
							<view class="_main-item-chunk _main-item_select">
								{{street[streetindex]}}
								<image class="_main-item_select_img" src="/static/img/drop-down.png" mode="aspectFill"></image>
							</view>
						</picker>
					</view>
				</view>
				<view class="_main-item">
					<view class="_main-item-chunk _main-item-label"><text>企业名称</text><text class="xing">*</text></view>
					<view class="_main-item-chunk _main-item-val">
						<input class="_main-item-val-input" maxlength="30"  v-model="quntuan_enterprise"  type="text" placeholder="企业名称"/>
					</view>
				</view>
				<view class="_main-item">
					<view class="_main-item-chunk _main-item-label"><text>信用代码</text><text class="xing">*</text></view>
					<view class="_main-item-chunk _main-item-val">
						<input class="_main-item-val-input" maxlength="18"  v-model="quntuan_code"  type="text" placeholder="企业信用代码"/>
					</view>
				</view>
				<view class="_main-item" v-if="employee_num_p">
					<view class="_main-item-chunk _main-item-label"><text>职工人数</text><text class="xing">*</text></view>
					<view class="_main-item-chunk _main-item-val">
						<input class="_main-item-val-input" maxlength="5"  v-model="employee_num"  type="text" placeholder="企业职工人数"/> 人
					</view>
				</view>
				<view class="_main-item" v-if="league_num_p">
					<view class="_main-item-chunk _main-item-label"><text>团员人数</text><text class="xing">*</text></view>
					<view class="_main-item-chunk _main-item-val">
						<input class="_main-item-val-input" maxlength="5"  v-model="league_num"  type="text" placeholder="企业团员人数"/> 人
					</view>
				</view>
				<view class="_main-item" v-if="women_num_p">
					<view class="_main-item-chunk _main-item-label"><text>女性人数</text><text class="xing">*</text></view>
					<view class="_main-item-chunk _main-item-val">
						<input class="_main-item-val-input" maxlength="5"  v-model="women_num"  type="text" placeholder="企业女性人数"/> 人
					</view>
				</view>
				<view class="_main-item" v-if="private_num_p">
					<view class="_main-item-chunk _main-item-label"><text>经济人士数</text><text class="xing">*</text></view>
					<view class="_main-item-chunk _main-item-val">
						<input class="_main-item-val-input" maxlength="5"  v-model="private_num"  type="text" placeholder="民营经济人士人数"/> 人
					</view>
				</view>
				<view class="_main-item" v-if="members_num_p">
					<view class="_main-item-chunk _main-item-label"><text>会员数</text><text class="xing">*</text></view>
					<view class="_main-item-chunk _main-item-val">
						<input class="_main-item-val-input" maxlength="5"  v-model="members_num"  type="text" placeholder="红十字会员数"/> 人
					</view>
				</view>
				<view class="_main-item" v-if="overseas_num_p">
					<view class="_main-item-chunk _main-item-label"><text>归侨侨眷</text><text class="xing">*</text></view>
					<view class="_main-item-chunk _main-item-val">
						<input class="_main-item-val-input" maxlength="5"  v-model="overseas_num"  type="text" placeholder="企业归侨侨眷人数"/> 人
					</view>
				</view>

				<view class="_main-item">
					<view class="_main-item-chunk _main-item-label"><text>联系人</text><text class="xing">*</text></view>
					<view class="_main-item-chunk _main-item-val">
						<input class="_main-item-val-input" maxlength="5"  v-model="usergpinfoapply_contract"  type="text" placeholder="联系人"/>
					</view>
				</view>
				<view class="_main-item">
					<view class="_main-item-chunk _main-item-label"><text>联系电话</text><text class="xing">*</text></view>
					<view class="_main-item-chunk _main-item-val">
						<input class="_main-item-val-input" maxlength="11"  v-model="usergpinfoapply_phone"  type="text" placeholder="联系电话"/>
					</view>
				</view>
				<view class="groupClass">
				<u-cell-group title="只选择图片" :title-style="{
				  padding:0,
				  fontSize:'30rpx',
				  color: '#333'
				}">
					<uni-file-picker limit="9" title="请选择申请资料的图片"
					v-model="imageValue"
					fileMediatype="image"
					mode="grid"
					@select="select"
					@delete="delImageFile"
					:auto-upload="false"
					></uni-file-picker>
				</u-cell-group>
				</view>
			</view>
		</view>
		<view class="btn tab-botton">
			<button :disabled="btndisabled" type="primary" @click="Gpapply">{{btnval}}</button>
		</view>
		<tabs-box></tabs-box>
	</view>
</template>

<script>
	import { mapState} from 'vuex';
	import { gpUserGpapply,gpUserGpapplyList,gpUserInfo ,getgpUsercom,base64Upload,getDictItems} from '@/common/request.js';
	import {gpGpinfoList} from '@/api/group'
  import {base64Uploads,wwwApplication} from '@/common/variable'
	// 以下路径需根据项目实际情况填写
	import { pathToBase64 } from '@/js_sdk/mmmm-image-tools/index.js'
	export default {
		data() {
			return {
				quntuan_enterprise:'',//企业名称
				quntuan_code:'',//信用代码
				employee_num:'',//企业职工人数
				employee_num_p:false,//职工人数
				league_num:'',//企业团员人数
				league_num_p:false,//团员人数
				women_num:'',//企业女性人数
				women_num_p:false,//女性人数
				members_num:'',//红十字会员数
				members_num_p:false,//会员数
				overseas_num:'',//企业归侨侨眷人数
				overseas_num_p:false,//归侨侨眷
				private_num:'',//民营经济人士人数
				private_num_p:false,//经济人士数
				usergpinfoapply_contract:'',//联系人
				usergpinfoapply_phone:'',//联系电话


				gpinfoIds:[],
				pageSize: 100,
				pageNo:1,
				list:[],//群团列表
				applylist:[],
				bangdingList:['1380438372622827521','1381802247230357506','1379686285051985922','1379669064124760066','1379696591987834881','1381786455088594945'],


				imageValue:[],
				imageList:[],
				btndisabled:false,
				btnval:'一键申请',

				District:['请选择区县'],
				DistrictCode:['0'],
				Districtindex:0,

				street:['请选择街道'],
				streetCode:['0'],
				streetindex:0,
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		onLoad() {
			if(!uni.getStorageSync("token"))
			{
				uni.navigateTo({
					url:"../login/login"
				})
				return;
			}
			this.gpGpinfoList()
			const params = {}
			gpUserGpapplyList(this.pageSize,this.pageNo,params).then(res => {
				if(res.success)
				{
					this.applylist = []
					res.result.records.forEach(ele => {
						if(ele.usergpinfoapplyStatus=='')
							this.applylist.push({id:ele.gpinfoId})
						if(!!ele.usergpinfoapplyStatus && ele.usergpinfoapplyStatus != 4)
							this.applylist.push({id:ele.gpinfoId})
					})

				}
			});

			gpUserInfo().then(res => {
				if(res.success)
				{
					this.usergpinfoapply_contract = res.result.userPname;
					this.usergpinfoapply_phone = res.result.userPhone;
					// this.$api.showinfo(res.result);
				}
			});

			getgpUsercom().then(res => {

					if(res.success) {
						this.quntuan_code = res.result.usercomCreditcode;
						this.quntuan_enterprise = res.result.usercomName;
					}
				});

			this.GetDistrict();
		},
    onShow(){
      // #ifdef H5
      console.log('分享')
      this.$wxSetShare()
      // #endif
    },
		methods: {
		  //市区选择
      gpGpinfoList(){
        const params = {gpinfoHidden:2,pageSize:this.pageSize,pageNo:this.pageNo}
        gpGpinfoList(params).then(res => {
          const {code,result:{records:list}} = res
          if(code===200)
          {
            let plist = []
            list.forEach(ele => {
              plist.push({id:ele.id,gpinfoShortname:ele.gpinfoShortname,gpinfoLogo:this.$imageUrl+ele.gpinfoLogo,gpinfoIntroduce:ele.gpinfoIntroduce})
            })
            this.list= plist

          }
        });
      },
      //区县街道选择
      districtchange(e){
				this.Districtindex = e.target.value
				this.getDictItems(this.DistrictCode[e.target.value]);
			},
      //请选择街道
			streetchange(e){
				this.streetindex = e.target.value
			},

			GetDistrict(){
				var that = this
				let params = {"column": "sorting","order": "desc"}
				getDictItems(params,"new_area_code").then(res => {
					if(res.success)
					{
						res.result.forEach(ele => {
							that.District.push(ele.text)
							that.DistrictCode.push(ele.value)
						})
					}
				})
			},
      //请选择街道
      getDictItems(code){
				this.street = ['请选择街道'];
				this.streetCode = ['0'];
				this.streetindex = 0;
				var that = this
				let params = {column: "sorting",order: "desc"}
				getDictItems(params,code).then(res => {
					if(res.success)
					{
						res.result.forEach(ele => {
							that.street.push(ele.text)
							that.streetCode.push(ele.value)
						})
					}
				})
			},
			select(e){
				let that = this;
				this.btndisabled = true;
				this.btnval = '图片上传中,请稍后';
				//上传
				var i=0;
				e.tempFiles.forEach(item=>{
					const token = uni.getStorageSync("token");
					let header={
					};
					header['content-type']=wwwApplication
					header["X-Access-Token"] = token


					pathToBase64(item.path)
					  .then(base64 => {
						let url = base64Uploads

						uni.request({
								url: url, //仅为示例，非真实的接口地址
								data: {
									fileStr: item.cloudPath+','+base64,
								  },
								  method: 'post',
								  header: header,
								success: (res) => {
									res = res.data
									if(res.success)
									{
										i++;
										item["httpurl"] = res.message;
										that.imageList.push(item);
										if(e.tempFiles.length <= i)
										{
											this.btndisabled = false;
											this.btnval = '一键申请';
										}
									}else
									{
									}
								}
							});


					  })
				})
			},
      //删除申请资料的图片
      delImageFile(e){
				this.imageList = this.imageList.filter(x=>x.path != e.tempFilePath)
			},
      //是否是这个群团的
      isAlliAnceSel(id){
				let some = this.gpinfoIds.some(function(item){		 //目前页面选中
					return item == id
				})
				let some_apply = this.applylist.some(function(item){ //已申请的
					return item.id == id
				})
				if(!some_apply)
				{
					if(some)
					{
						return 1;
					}
					else
						return 2;
				}
				else
					return 3;

			},
      //群团列表
      gpAlliAnceSel(e){
				var id = e.currentTarget.dataset.id;
				var index = this.gpinfoIds.indexOf(id);
				if(index>-1){//大于0 代表存在，
				    this.gpinfoIds.splice(index,1);//存在就删除
				}
				else
				{
					let some_apply = this.applylist.some(function(item){
						return item.id == id
					})
					console.log(some_apply);
					if(!some_apply)
						this.gpinfoIds.push(id)
				}
				console.log('this.gpinfoIds:'+this.gpinfoIds);
				this.employee_num_p  = false;
				this.league_num_p  = false;
				this.women_num_p  = false;
				this.private_num_p = false;
				this.members_num_p  = false;
				this.overseas_num_p  = false;
				this.gpinfoIds.filter( (item,i) =>{
				    if(item == this.bangdingList[0])
						this.employee_num_p = true;
					if(item == this.bangdingList[1])
						this.league_num_p  = true;
					if(item == this.bangdingList[2])
						this.women_num_p  = true;
					if(item == this.bangdingList[3])
						this.members_num_p  = true;
					if(item == this.bangdingList[4] )
						this.private_num_p = true;
					if(item == this.bangdingList[5])
						this.overseas_num_p  = true;

					console.log(this.bangdingList[5] , item);
				 });

			},
			Gpapply(){
				var that = this
        if(that.gpinfoIds.length==0)
        {
          this.$api.msg('请选择要加入的群团');
          return;
        }
				if(that.Districtindex == 0)
				{
					this.$api.msg('请选择区县');
					return;
				}
				if(that.streetindex == 0)
				{
					this.$api.msg('请选择街道');
					return;
				}
				if(that.quntuan_enterprise=='')
				{
					this.$api.msg('企业名称不能为空');
					return;
				}
        if(!that.quntuan_code.length){
          this.$api.msg('请输入企业信用代码');
          return
        }
				if(that.quntuan_code.length != 18)
				{
					this.$api.msg('企业信用代码必须要18位');
					return;
				}

				if(that.employee_num=='' && that.employee_num_p)
				{
					this.$api.msg('请输入企业职工人数');
					return;
				}
				if(that.league_num==''  && that.league_num_p)
				{
					this.$api.msg('请输入团员人数');
					return;
				}
				if(that.women_num=='' && that.women_num_p)
				{
					this.$api.msg('请输入企业女性人数');
					return;
				}
				if(that.youth_num=='')
				{
					this.$api.msg('请输入企业青年人数');
					return;
				}
        if(that.members_num==''&&that.members_num_p)
        {
          this.$api.msg('请输入红十字会员数');
          return;
        }
				if(that.overseas_num=='' && that.overseas_num_p)
				{
					this.$api.msg('请输入企业侨民人数');
					return;
				}
				if(that.usergpinfoapply_contract=='')
				{
					this.$api.msg('请输入联系人');
					return;
				}
				if(that.usergpinfoapply_phone=='')
				{
					this.$api.msg('请输入联系电话');
					return;
				}


				var imgurllist = "";
				this.imageList.forEach(e=>{
					imgurllist += this.$imageUrl + e.httpurl + ",";
				})
				imgurllist = imgurllist.substr(0,imgurllist.length-1);

				var party_status_int = 1;
				if(that.party_status)
					party_status_int = 2;
				var params ={"gpUserGpapplyModel": {
					"usergpinfoapplyAreaCode":this.DistrictCode[this.Districtindex],
					"usergpinfoapplyStreetCode":this.streetCode[this.streetindex],
					"usergpinfoapplyFile":imgurllist,
					"economicNum":that.private_num ,
					"memberNum":that.members_num,
					"usercomName":that.quntuan_enterprise,
					"usercomCreditcode":that.quntuan_code,
					"employeeNum": that.employee_num,
					"insuredNum": that.insured_num,
					"leagueNum": that.league_num,
					"overseasNum": that.overseas_num,
					"partyStatus":party_status_int,
					"superiorParty":that.superior_party,
					"usergpinfoapplyContract":that.usergpinfoapply_contract,
					"usergpinfoapplyPhone":that.usergpinfoapply_phone,
					"womenNum":that.women_num,"youthNum":that.youth_num}
					,"gpinfoIds":that.gpinfoIds}
				this.$api.showLoading()
        gpUserGpapply(params).then(res => {
					console.log(res)
					if(res.success)
					{
            this.$api.hideLoading()
						this.$api.msg('申请成功');

						setTimeout(() => {
							uni.navigateTo({
								url:'/pages/myquntuangk/myquntuangk'
							})
						}, 1000);
						return;
					}else{
						this.$api.msg(res.message);
					}
				});
			}
		}
	}
</script>

<style lang="scss">

	.pagecon{
		background-color: #f7f7f7;
		min-height: 100vh;
		padding-bottom: 160rpx;
		.btn{
			text-align: center;
			padding: 0 50rpx;
		}
	}

	.bodycon{
		padding: 30rpx;

		.quntuanlist{
			overflow: hidden;
			padding: 10rpx 0;
			.item{
				width: 29%;
				float: left;
				text-align: center;
				background-color: #ffffff;
				margin: 15rpx;
				border-radius: 10rpx;
				box-shadow: 0 0 20rpx #eeeeee;
				.msg{
					padding: 20rpx 0;
					image{
						height: 60rpx;
					}
					text{
						font-size: 24rpx;
					}
				}

				.weixuan{
					background-color: #e2e2e2;
					padding: 0rpx 10rpx;
					position: absolute;
					border-radius: 10rpx 0 10rpx 0;
					text{
						font-size: 20rpx;
						color: #ffffff;
					}
				}
				.gouxuan{
					background-color: #06af06;
					padding: 0rpx 10rpx;
					position: absolute;
					border-radius: 10rpx 0 10rpx 0;
				}
				.duih{
					width: 30rpx;
				}
			}
		}


	}
	.personalInfor-page-main{
		width: 100%;
		padding: 0 60rpx;
		box-sizing: border-box;
		.personalInfor-page-main-box{
			width: 100%;
			margin-bottom: 40rpx;
			._main-item{
				// height: 86rpx;
				border-bottom: 1px solid rgba(200,199,204,0.5);
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
				align-items: center;
				font-size: 30rpx;
				._main-item-chunk{
					color: #000;
					line-height: 84rpx;
				}
				._main-item_select{
					margin-left: 30rpx;
					._main-item_select_img{
						width: 20rpx;
						height: 20rpx;
						margin-left: 10rpx;
					}
				}
				._main-item-label{
					width: 30%;
				}
				._main-item-val{
					width: 70%;
					display: flex;
					flex-wrap: nowrap;
					justify-content: flex-end;
					align-items: center;
					button{
						background-color: #dd524d;
						color: #FFFFFF;
					}
					._main-item-val-head{
						width: 48rpx;
						height: 48rpx;
						border-radius: 50%;
						display: flex;
						.head-img{
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
					._main-item-val-input{
						width: 100%;
						text-align:right;
						display: flex;
						margin-right: 10rpx;
						._main-item-val-input-text{
							display: flex;
							flex-wrap: nowrap;
							align-items: center;
						}
						.drop-dowm-img{
							width: 30rpx;
							height: 30rpx;
							margin-left: 10rpx;
							transform: rotateZ(270deg);
						}
					}
					.drop-dowm-img{
						width: 30rpx;
						height: 30rpx;
						margin-left: 10rpx;
						transform: rotateZ(270deg);
					}
				}
			}
		}
	}

	.xing
	{
		color: #ff0000;
		margin-left: 10rpx;
	}
</style>
